<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, initial-scale=1, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <title>价格播报</title>
    <script>
        document.documentElement.style.fontSize = document.documentElement.clientWidth / 37.5 + 'px';
    </script>
    <link href="https://cdn.bootcss.com/layer/2.1/skin/layer.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="../css/priceBoard.css">
</head>
<body>
<div id="priceBoard" style="box-sizing: border-box;padding-bottom: 30px;">
    <div class="main-title" v-if="params.reportTemplateId || params.carModelId">
        <p class="title-content">{{baseData.carModelName || ''}}</p>
        <p v-if="params.reportTemplateId" class="title-info">里程：{{reportTemplate.templateMileage || 0}}万公里 | 上牌日期：{{reportTemplate.templateLicenceDate | formatDate}}年</p>
    </div>
    <div class="local">
        <div class="read-local">看本地</div>
        <div class="container">
            <div class="bg_con">
                <input id="checked_1" type="checkbox" class="switch" v-model="isLocal" @change="watchLocal"/>
                <label for="checked_1"></label>
            </div>
        </div>
    </div>
    <div class="price-title">价格分析</div>
    <div class="min-max-price">
        <div class="min-price-num">{{baseData.carRetailPriceMin | dealPrice}}万元</div>
        <div class="left-mark"></div>
        <div class="min-price">最低价</div>

        <div class="middle-mark">
            <img class="average-price" src="../images/average-price.png">
            <p>均价</p>
            <p style="top:25px">{{baseData.carRetailPriceAvg | dealPrice}}万元</p>
        </div>

        <div class="max-price-num">{{baseData.carRetailPriceMax | dealPrice}}万元</div>
        <div class="right-mark"></div>
        <div class="max-price">最高价</div>

        <div class="price-length"></div>
    </div>

    <div class="price-title">近一个月价格走势（均价/万元）</div>
    <div class="price-board">
        <div id="price-echarts" style="width: 94%;margin: 0 auto;height: 17rem"></div>
    </div>

    <div class="price-title">颜色分布</div>
    <div style="margin-top:20px">
        <div id="color-board" style="width: 94%;margin: 0 auto;height: 24rem">

        </div>
    </div>

    <div class="price-title">在销数量占比</div>
    <div class="online-sale">
        <div class="middle" :style="{left:maxWidth}" :class="{fillfull:width,zerofill:width==0}">{{widthPercent}}</div>
        <div class="sale-box">
            <div class="sale-inner-box" :style="{width:width}"></div>
        </div>
        <div class="start">0%</div>
        <div class="end">100%</div>
    </div>
</div>

<script src="../js/vue.js"></script>
<script src="https://cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/layer/2.1/layer.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.1.0/echarts.js"></script>
<script src="../js/price/priceBoard.js"></script>

</body>
</html>